<!----------------引入头部文件-------------------->
<include file="Common/title" />
<!-----------------mui初始化------------------------>
    <script type="text/javascript">
        mui.init()
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 id="title" class="mui-title">分类</h1>
</header>

<div class="mui-content">
    <div class="mui-card">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">card（圆角列表）
                <div id="M_Toggle" class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <?php foreach($info as $k=>$v):?>
            <li class="mui-table-view-cell mui-collapse"  flbm="<?php echo $v['flbm'];?>">
                <a class="mui-navigate-right"   href="javascript:void(0);"><?php echo $v['flmc']; ?></a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <?php if(!$v['lastcat']){ ?>
                        <li class="mui-table-view-cell">暂无下级分类</li>
                    <?php }else{ foreach($v['lastcat'] as $k1=>$v1){ ?>
                        <li class="mui-table-view-cell"><a class="mui-navigate-right" href="{:U('cat_wzbm',array('flno'=>$v1['flno']))}"><?php echo $v1['flmc']; ?></a></li>
                    <?php } } ?>
                </ul>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<div style="height:50px;border:1px solid #EFEFF4"></div>
<!------------------引入底部导航卡文件--------------------->
<include file="Common/nav"/>
</body>
<script>
    window.addEventListener('toggle', function(event) {
        if (event.target.id === 'M_Toggle') {
            var isActive = event.detail.isActive;
            var table = document.querySelector('.mui-table-view');
            var card = document.querySelector('.mui-card');
            if (isActive) {
                card.appendChild(table);
                card.style.display = '';
            } else {
                var content = document.querySelector('.mui-content');
                content.insertBefore(table, card);
                card.style.display = 'none';
            }
        }
    });

</script>
</html>